<template>
	<u-picker
		:show="selectCityShow" 
		:columns="adressList"
		keyName="cityName"
		ref="uCityPicker"
		:defaultIndex="defaultCityIndex"
		@change="changeCityHandler"
		@confirm="selectCityConfirm" 
		@cancel="cancel"
	></u-picker>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				adressList: [],
				defaultCityIndex: [0,0],
				selectCityShow: false
			}
		},
		props: {
			isShow: {
				default: false,
				type: Boolean
			},
			isInit: {
				default: false,
				type: Boolean
			}
		},
		watch: {
			isShow(n) {
				this.selectCityShow = n;
				if(n) {
					this.initCityFn();
				}
			},
			isInit(n) {
				if(n) this.defaultCityIndex = [0,0];
				this.initCityFn();
			}
		},
		computed: {
			...mapState('global', {
				allCityList: 'allCityList'
			})
		},
		methods: {
			// 获取城市list
			getCityIndexList(arr) {
				return arr.map((ele) => {
					return {
						id: ele.id,
						cityName: ele.cityName
					}
				});
			},
			async initCityFn(indexs) {
				console.log("0")
				let index = indexs || this.defaultCityIndex.slice(0,2);
				let cityList = this.allCityList;
				let initProviceList = [...this.getCityIndexList(cityList)];
				let initCityList = [...this.getCityIndexList(cityList[index[0]].children)];
				// let initAreaList = this.getCityIndexList(cityList[index[0]].children[index[1]].children);
				this.adressList = [
					initProviceList,
					initCityList,
					// initAreaList
				];
			},
			changeCityHandler(e) {
				const {
					columnIndex,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uCityPicker
				} = e;
				if(columnIndex == 0) {
					this.initCityFn([indexs[0]])
				} else if(columnIndex == 1) {
					this.initCityFn([indexs[0],indexs[1]])
				}
			},
			selectCityConfirm(e) {
				console.log(e.indexs)
				this.defaultCityIndex = e.indexs;
				this.$emit("getCityValues", e.value)
			},
			cancel() {
				this.$emit("cancel")
			}
		}
	}
</script>

<style>
</style>